﻿html {
    height: 100%;
    /**/overflow: auto;
    font-family: "Segoe UI";
}


.test {
    /*100%;*/
}

#contenthost {
    /*border: green 5px solid;*/
    height: calc(100% - 10px);
    width: calc(100% - 10px);
}

.fragment {
    /* Define a grid with rows for a banner and a body */
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 128px 1fr;
    display: -ms-grid;
    height: 100%;
    width: 100%;
}

    .fragment header[role=banner] {
        /* Define a grid with columns for the back button and page title. */
        -ms-grid-columns: 120px 1fr;
        -ms-grid-rows: 1fr;
        display: -ms-grid;
    }

        .fragment header[role=banner] .win-backbutton {
            margin-left: 39px;
            margin-top: 59px;
        }

        .fragment header[role=banner] .titlearea {
            -ms-grid-column: 2;
            margin-top: 37px;
        }

            .fragment header[role=banner] .titlearea .pagetitle {
                width: calc(100% - 20px);
            }

    .fragment section[role=main] {
        -ms-grid-row: 2;
        height: 100%;
        width: 100%;
    }

@media screen and (-ms-view-state: snapped) {
    .fragment header[role=banner] {
        -ms-grid-columns: auto 1fr;
        margin-left: 20px;
    }

        .fragment header[role=banner] .win-backbutton {
            margin: 0;
            margin-right: 10px;
            margin-top: 76px;
        }

            .fragment header[role=banner] .win-backbutton:disabled {
                display: none;
            }

        .fragment header[role=banner] .titlearea {
            -ms-grid-column: 2;
            margin-left: 0;
            margin-top: 68px;
        }
}

@media screen and (-ms-view-state: fullscreen-portrait) {
    .fragment header[role=banner] {
        -ms-grid-columns: 100px 1fr;
    }

        .fragment header[role=banner] .win-backbutton {
            margin-left: 29px;
        }
}

.disable {
    display: none;
}

.clear {
    clear : both;
}

input[type="text"].error, input[type="password"].error {
    border-color : #DD4B39;
}

section {
    display: -ms-grid;
    -ms-grid-columns: 120px 1fr;
    -ms-grid-rows: 1fr;
}

#content {
    width: 100%;
    margin-top: 50px;
    height: calc(100% - 50px);
    -ms-grid-column: 2;
}

.header {
    background-color : #21ACE3;
    color : white;
}


.header .win-backbutton {
    border-width: 3px;
    border-color: white;
    color : white;
}

.header .win-backbutton:hover {
    background-color : white;
    color : #21ACE3;
}

.header .win-backbutton:hover:active {
    border-color: #E52F7C;
    background-color : white;
    color : #E52F7C;
}


#content button {
    border-color: white;
    color : white;
    background-color: #21ACE3;
}

#content button:hover {
    background-color: #E52F7C;
}

#content button:hover:active {
    color : #E52F7C;
    background-color : white;
    border-color: #E52F7C;
}

.win-rightreversetbutton {
    display: inline-block;
    min-width: 0;
    min-height: 0;
    background-clip: border-box;
    box-sizing: border-box;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    border-color : white;
    padding: 0;
    text-align: center;

    width: 41px;
    height: 41px;
    font-size: 14pt;
    line-height: 37px; 
    vertical-align: baseline;
    color : white;
}

.win-rightreversetbutton::before {
    font-weight: normal;
    content: "\E111";
    vertical-align: 50%;
}

.win-rightreversetbutton:hover {
    background-color : white;
    color : #21ACE3;
}

.win-rightreversetbutton:hover:active {
    background-color : white;
    color :#E52F7C;
    border-color : #E52F7C;
}


#content .win-leftbutton {
    display: inline-block;
    min-width: 0;
    min-height: 0;
    background-clip: border-box;
    box-sizing: border-box;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    border-color : #21ACE3;
    padding: 0;
    text-align: center;

    width: 41px;
    height: 41px;
    font-size: 14pt;
    line-height: 37px; 
    vertical-align: baseline;
    color : #21ACE3;
}

#content .win-leftbutton::before {
    font-weight: normal;
    content: "\E112";
    vertical-align: 50%;
}

#content .win-leftbutton:hover {
    background-color : #E5E6EA;
}

#content .win-leftbutton:hover:active {
    background-color : white;
    color :#E52F7C;
    border-color : #E52F7C;
}


#content .win-rightbutton {
    display: inline-block;
    min-width: 0;
    min-height: 0;
    background-clip: border-box;
    box-sizing: border-box;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    border-color : #21ACE3;
    padding: 0;
    text-align: center;
    width: 41px;
    height: 41px;
    font-size: 14pt;
    line-height: 37px; 
    vertical-align: baseline;
    color : #21ACE3;
}

#content .win-rightbutton::before {
    font-weight: normal;
    content: "\E111";
    vertical-align: 50%;
}

#content .win-rightbutton:hover {
    background-color : #E5E6EA;
}

#content .win-rightbutton:hover:active {
    background-color : white;
    color :#E52F7C;
    border-color : #E52F7C;
}


#content .buttonTeamProject{
    display: inline-block;
    min-width: 0;
    min-height: 0;
    background-clip: border-box;
    box-sizing: border-box;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    border-color : #21ACE3;
    padding: 0;
    text-align: center;
    width: 41px;
    height: 41px;
    font-size: 14pt;
    line-height: 37px; 
    vertical-align: baseline;
    color : #21ACE3;
}

#content .buttonTeamProject::before {
    font-weight: normal;
    content: "\E13D";
    vertical-align: 50%;
}

#content .buttonTeamProject:hover {
    background-color : #E5E6EA;
}

#content .buttonTeamProject:hover:active {
    border-color : #E52F7C;
    color : #E52F7C;
    background-color : transparent;
}


#content .buttonCalendarProject{
    display: inline-block;
    min-width: 0;
    min-height: 0;
    background-clip: border-box;
    box-sizing: border-box;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    border-color : #21ACE3;
    padding: 0;
    text-align: center;
    width: 41px;
    height: 41px;
    font-size: 14pt;
    line-height: 37px; 
    vertical-align: baseline;
    color : #21ACE3;
}

#content .buttonCalendarProject::before {
    font-weight: normal;
    content: "\E163";
    vertical-align: 50%;
}

#content .buttonCalendarProject:hover {
    background-color : #E5E6EA;
}

#content .buttonCalendarProject:hover:active {
    border-color : #E52F7C;
    color : #E52F7C;
    background-color : transparent;
}


#content .buttonEditProject{
    display: inline-block;
    min-width: 0;
    min-height: 0;
    background-clip: border-box;
    box-sizing: border-box;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    border-color : #21ACE3;
    padding: 0;
    text-align: center;
    width: 41px;
    height: 41px;
    font-size: 14pt;
    line-height: 37px; 
    vertical-align: baseline;
    color : #21ACE3;
}

#content .buttonEditProject::before {
    font-weight: normal;
    content: "\E104";
    vertical-align: 50%;
}

#content .buttonEditProject:hover {
    background-color : #E5E6EA;
}

#content .buttonEditProject:hover:active {
    border-color : #E52F7C;
    color : #E52F7C;
    background-color : transparent;
}


#content .buttonAddProject{
    display: inline-block;
    min-width: 0;
    min-height: 0;
    background-clip: border-box;
    box-sizing: border-box;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    border-color : white;
    padding: 0;
    text-align: center;
    width: 41px;
    height: 41px;
    font-size: 14pt;
    line-height: 37px; 
    vertical-align: baseline;
    color : white;
}

#content .buttonAddProject::before {
    font-weight: normal;
    content: "\E109";
    vertical-align: 50%;
}

#content .buttonAddProject:hover {
    background-color : white;
    color : #21ACE3;
}

#content .buttonAddProject:hover:active {
    border-color : #E52F7C;
    color : #E52F7C;
    background-color : transparent;
}


/* CSS de la ListView */

#content .win-listview .win-container {
    background-color: transparent;
    outline: none;
}

#content .win-listview .win-container:hover {
    background-color: transparent;
    outline: 3px solid #E52F7C;
}

#content .itemListView {
    margin: 0px;
    background-color : transparent;
    border : 1px solid #DDDDDD;
}
/*

.myBackButton {
    background-image:url("/images/LeftArrowBlack.png");
    background-color:white;
    background-repeat:no-repeat;
    background-size: 44px 40px;
    background-position-x:-2px;
    background-position-y:-2px;
    width: 37px;
    height: 37px;
    border: 2px solid #000;
    border-radius : 39px;
}

.myBackButton:hover {
    background-color:#DED8D8;
}

.myBackButton:active {
    background-color:#000000;
    background-image:url("/images/LeftArrowWhite.png");
}
*/
/* LeftArrowButton 

.myLeftArrowButton {
    background-image:url("/images/LeftArrowBlack.png");
    background-color:white;
    background-repeat:no-repeat;
    background-size: 44px 40px;
    background-position-x:-2px;
    background-position-y:-2px;
    width: 37px;
    height: 37px;
    border: 2px solid #000;
    border-radius : 39px;
}

.myLeftArrowButton:hover {
    background-color:#DED8D8;
}

.myLeftArrowButton:active {
    background-color:#000000;
    background-image:url("/images/LeftArrowWhite.png");
}
*/
/* RightArrowButton 

.myRightArrowButton {
    background-image:url("/images/RightArrowBlack.png");
    background-color:white;
    background-repeat:no-repeat;
    background-size: 44px 40px;
    background-position-x:-2px;
    background-position-y:-2px;
    width: 37px;
    height: 37px;
    border: 2px solid #000;
    border-radius : 39px;
}

.myRightArrowButton:hover {
    background-color:#DED8D8;
}

.myRightArrowButton:active {
    background-color:#000000;
    background-image:url("/images/RightArrowWhite.png");
}
*/